import { create } from "zustand";
import { useEffect } from "react";
// 1.创建store
const useChannelStore = create((set) => {
  return {
    // 频道列表数据
    channelList: [],
    // 异步获取并修改状态数据的方法
    getChannelList: async () => {
      // 获取频道列表数据
      const res = await fetch("http://geek.itheima.net/v1_0/channels");
      const jsonRes = await res.json();
      // 调用set方法修改状态数据
      set({
        channelList: jsonRes.data.channels,
      });
    },
  };
});

function App() {
  // 2.获取store中的数据和方法
  const { channelList, getChannelList } = useChannelStore();
  useEffect(() => {
    // 调用store中的异步获取数据的方法
    getChannelList();
  }, []);
  return (
    <>
      <ul>
        {/* 渲染store中的数据 */}
        {channelList.map((item) => (
          <li key={item.id}>{item.name}</li>
        ))}
      </ul>
    </>
  );
}

export default App;
